<template>
  <!-- 我的主页 -->
  <div class="home-page">
    <h2>TA的主页</h2>
    <el-tabs v-model="activeName" @tab-click="handleClick" v-loading.fullscreen.lock="loading" element-loading-text="加载中">
      <el-tab-pane :label="`文章${user.articleCount?user.articleCount:0}`" name="first">
        <div class="tag">
          <el-button round size="mini" @click="changeClick(true)">最热</el-button>
          <el-button round size="mini" @click="changeClick(false)">最新</el-button>
          <span class="article-admin">文章管理</span>
          <!-- 最新和最热 -->
          <HOT v-show="isShowHot" />
          <NEW v-show="!isShowHot" />
        </div>
      </el-tab-pane>
      <el-tab-pane :label="`文集 ${user.categoryCount?user.categoryCount:0}`" name="second">
        <div class="category">
          <div class="unclassified" v-for="category in CategoryList" :key="category">
            <h3>{{category.name}}</h3>
            <div class="content">
              <div>0篇文章</div>
              <div>0推荐</div>
              <div>0阅读</div>
            </div>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane :label="`作品 ${user.productCount?user.productCount:0}`" name="third">
        <p class="more">没有更多了</p>
      </el-tab-pane>
      <el-tab-pane :label="`关注${user.followedCount?user.followedCount:0} `" name="fourth">
        <div class="users" v-if="user.followedCount">
          <div class="user">
            <img src="../../../../public/images/font/ia_100000011.jpg" />
            <span>偶尔</span>
          </div>
        </div>
        <p class="more" v-else>没有更多了</p>
      </el-tab-pane>
      <el-tab-pane :label="`被关注${user.followerCount?user.followerCount:0}` " name="five">
        <div class="users" v-if="user.followerCount">
          <div class="user">
            <img src="../../../../public/images/font/ia_100000011.jpg" />
            <span>偶尔</span>
          </div>
          <div class="user">
            <img src="../../../../public/images/font/ia_100000011.jpg" />
            <span>偶尔</span>
          </div>
          <div class="user">
            <img src="../../../../public/images/font/ia_100000011.jpg" />
            <span>偶尔</span>
          </div>
          <div class="user">
            <img src="../../../../public/images/font/ia_100000011.jpg" />
            <span>偶尔</span>
          </div>
          <div class="user">
            <img src="../../../../public/images/font/ia_100000011.jpg" />
            <span>偶尔</span>
          </div>
          <div class="user">
            <img src="../../../../public/images/font/ia_100000011.jpg" />
            <span>偶尔</span>
          </div>
        </div>
        <p class="more" v-else>没有更多了</p>
      </el-tab-pane>
      <el-tab-pane :label="`收藏 ${user.favCount?user.favCount:0}`" name="six">
        <el-button round size="mini">图书</el-button>
        <el-button round size="mini">文章</el-button>
      </el-tab-pane>
      <el-tab-pane :label="`评论 ${user.commentCount?user.commentCount:0}`" name="seven">
        <p class="more">没有更多了</p>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import "../../../assets/css/home.css";

import HOT from "./compontent/HOT";
import NEW from "./compontent/NEW";

import { reqGetCategoryList } from "../../../API/personal";
export default {
  name: "Home",
  components: {
    HOT,
    NEW,
  },
  data() {
    return {
      isShowHot: true,
      activeName: "first",
      CategoryList: [],
      loading: false,
    };
  },
  props: {
    user: Object,
  },
  methods: {
    //切换显示隐藏最新和最热的内容
    changeClick(Boolean) {
      this.isShowHot = Boolean;
    },
    //点击发送请求文集数据
    async handleClick() {
      //先判断用户是否已经登录了
      const dataId = this.$route.params.userId;
      // console.log(dataId);
      if (dataId) {
        this.loading = true;
        const res = await reqGetCategoryList(`?id=${dataId}`);
        // console.log(res);
        this.CategoryList = res.data;
        this.loading = false;
      }
    },
  },
};
</script>

<style scoped>
.category {
  display: flex;
  flex-wrap: wrap;
}

/* 关注 */
.users {
  display: flex;
  flex-wrap: wrap;
}
.users .user {
  width: 200px;
  height: 100px;
  text-align: center;
}
.user img {
  border-radius: 50%;
  line-height: 100px;
  vertical-align: middle;
}
.user span {
  margin-left: 10px;
  font-weight: 600;
}
.more {
  margin: 40px 0;
  text-align: center;
  font-size: 20px;
}
</style>
